<template>
	<view style="background:#f2f5fa;overflow: hidden;">
		<view class="wrap">
			<mescroll-body @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
				<view class="news-item"
				@click="goPage(`/subpkg/newsContent/newsContent`,{id:item.newsId,pageName:'newsList'})"  
				v-for="(item,index) in dataList" :key="index" 
				:style="{borderBottom:index==total-1?'':'1px solid #eee'}">
					<!-- <view class="tagClass"  v-if="item.isTop=='0'">
						<u-tag text="置顶" plain size="mini"/>
					</view> -->
					<u--image :src="item.coverImg" mode="aspectFill" width="250rpx" height="180rpx"/>
					<view class="news-text">
						<u--text :lines="2" :text="item.newsTitle"/>
						<view class="news-date">{{$u.timeFormat(item.createTime, 'yyyy-mm-dd')}}</view>
					</view>
					
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
				mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				total:0,
				dataList: [],
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: '去看看'
					}
				},
			}
		},
		onLoad() {
			
			this.mescroll.resetUpScroll()
		},
		methods: {
			...mapActions('m_newsList',['getNewsListAction']),
			//路由跳转
			goPage(url,obj){
				uni.$u.route(url,obj);
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.dataList=[]
				this.mescroll.resetUpScroll()
			},
			
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				
				const params={
					pageSize:page.size,
					pageNum:page.num
				}
				this.getNewsListAction({data:params,success:res=>{
					let list=res.data.rows
					this.total=res.data.total
					if(page.num == 1) this.indexList=[]
					this.dataList=this.dataList.concat(list)
					this.mescroll.endBySize(list.length, res.data.total)
				}})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		.news-item{position: relative; display: flex;border-radius: 11px;
		margin:30rpx 20rpx 0rpx 20rpx;font-size:30rpx;background:#fff;padding: 30rpx;
			.tagClass{position: absolute;top:10rpx;right:10rpx;}
			.news-date{font-size:24rpx;color:#bbb}
			.news-text{flex:1;display: flex;flex-direction: column;justify-content: space-between;align-items: stretch;
			padding:20rpx 0 20rpx 10rpx;
			}
		}
	}
	
	   .news-text /deep/ .u-text {display: block;flex:0}
	    
	
	
	
</style>
